<title>成本</title>
#parse("/common/loading.html")
<div class="page animation-fade">
    <div class="page-header page-header-bordered">
        <h1 class="page-title">成本</h1>
        <div class="page-header-actions">
            <button type="button" class="btn btn-icon btn-info collapsed" data-toggle="collapse"
                    data-target="#collapseFilter" aria-expanded="false" aria-controls="collapseFilter">
                <i class="icon fa-filter"></i>
            </button>
        </div>
    </div>

    <div class="page-content">
        <div class="collapse" id="collapseFilter" aria-expanded="true">
            <div class="panel">
                <div class="panel-body">
                    <form class="form-horizontal" id="form">
                        <div class="form-group">
                            <div class="col-sm-4">
                                <label class="col-sm-4 control-label">人工平均工资</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="workerCost" value="4000">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="col-sm-4 control-label">中转仓成本</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="wareCost" value="200000">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="col-sm-4 control-label">作业时长</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="dayTime" value="6" placeholder="6小时">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-4">
                                <label class="col-sm-4 control-label">配送处理时间</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="cost1" value="30" placeholder="30分钟">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="col-sm-4 control-label">回收处理时间</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="cost2" value="60" placeholder="60分钟">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <label class="col-sm-6 control-label"></label>

                                <a class="btn btn-success" onclick="reloadData()"><i class="icon fa-refresh"></i> 刷新
                                </a>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="row" data-plugin="matchHeight" data-by-row="true">
            <div class="col-lg-3  info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-warning">
                            <i class="icon fa-home"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">总成本</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="total" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">&nbsp</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3  info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-danger">
                            <i class="icon fa-file-text-o"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">人工成本</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="worker" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">&nbsp;</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3  info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-success">
                            <i class="icon fa-truck"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">中转仓成本</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="ware" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">&nbsp;</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3  info-panel">
                <div class="widget widget-shadow">
                    <div class="widget-content bg-white padding-20">
                        <button type="button" class="btn btn-floating btn-sm btn-primary">
                            <i class="icon fa-yen"></i>
                        </button>
                        <span class="margin-left-15 font-weight-400">运输成本</span>
                        <div class="content-text text-center margin-bottom-0">
                            <span id="transport" class="font-size-40 font-weight-100">&nbsp;</span>
                            <p class="blue-grey-400 font-weight-100 margin-0">&nbsp;</p>
                        </div>
                    </div>
                </div>
            </div>
    </div>
        <div class=" col-md-6" >
            <div class="panel panel-bordered">
                <div class="panel-heading">
                    <h3 class="panel-title">成本</h3>
                    <div class="panel-actions">
                    </div>
                </div>
                <div class="panel-body padding-3 height-250"  id="cost_bar_one">
                </div>
            </div>
        </div>
        <div class=" col-md-6" >
            <div class="panel panel-bordered">
                <div class="panel-heading">
                    <h3 class="panel-title">运输油耗</h3>
                    <div class="panel-actions">
                    </div>
                </div>
                <div class="panel-body padding-3 height-250"  id="cost_bar_two">
                </div>
            </div>
        </div>
</div>
<script type="text/javascript">
    $(function () {
        reloadData();
    })
    function reloadData() {
        var param = Form.getParams($("#form"));
        param.batchId = "59";
        $.ajax({
            url: "#springUrl('/network/city/cost/bar1')",
            data: param,
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    $("#total").html(d.data.allCots);
                    $("#worker").html(d.data.workerCost);
                    $("#ware").html(d.data.ware);
                    $("#transport").html(d.data.transportCost);
                    loadbar1(d.data.s1,d.data.s2,d.data.s3);
                    loadbar2(d.data.s4,d.data.s5);
                    document.getElementById("loading").style.display="none";
                }
            },
            error:function(text){
                var div1="<div type='text' style='margin-top:15%' class=' text-center  '>查询数据异常</div>"
                $("#cost_bar_one").prepend(div1);
                $("#cost_bar_two").prepend(div1);
                document.getElementById("loading").style.display="none";
            }
        })
    }
    function loadbar1(s1,s2,s3) {
        var myChart = echarts.init(document.getElementById('cost_bar_one'), 'macarons');
        var option = {
            title: {
                text: '一天内所有车辆总油耗：元', show: false
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            toolbox: {

            },
            grid: {
                left: '3%',
                right: '3%',
                bottom: '5%',
                top:'5%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: s1,
                    axisLabel: {
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show:true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },

                }
            ],
            color:['#0fa99d','#4472c4','#d9d9d9','#787473','#c9eee7','#e7a14c',
                '#4472c4','#40C2F0','#9EC678','#BDD7EE','#A5A5A5',
                '#8497B0','#EBEBEB','#015E7F','#415168'],
            series: [
                {
                    name: '成本(元)',
                    type: 'bar',
                    barWidth:20,
                    data: s2,
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: function(params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#0fa99d','#d9d9d9','#787473','#c9eee7','#e7a14c',
                                    '#4472c4','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            },
                            //以下为是否显示，显示位置和显示格式的设置了
                        }}
                },
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['15%', '30%'],
                    center:['80%','20%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:s3
                }
            ]
        };
        myChart.setOption(option);
    }
    function loadbar2(s4,s5) {
        var myChart1 = echarts.init(document.getElementById('cost_bar_two'), 'macarons');
        option1 = {
            title: {
                text: '一月内所有车辆总油耗：' + s4 + '元'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            toolbox: {
                show: true,
            },
            grid: {
                left: '3%',
                right: '3%',
                bottom: '15%',
                top:'13%',
                containLabel: true
            },
            xAxis: [
                {
                    data: ['中心象限', '第一象限', '第二象限', '第三象限', '第四象限', '其他象限'],//设置字体倾斜
                    type: 'category',
                    axisLabel:{
                        show:true,
                        interval:0,
                        rotate:45,//倾斜度 -90 至 90 默认为0
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show:true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            series: [
                {
                    name: '车辆油耗',
                    type: 'bar',
                    barCategoryGap: '50%',
                    barWidth:20,
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: function(params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#0fa99d','#d9d9d9','#787473','#c9eee7','#e7a14c',
                                    '#4472c4','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            },
                            //以下为是否显示，显示位置和显示格式的设置了
                        }},

                    data: s5
                }
            ]
        };
        myChart1.setOption(option1);
    }

</script>
</div>